<template>
	<el-container>
		<el-main class="nopadding">
			<sc-water-mark ref="wm" :text="waterMarkContent" :subtext="waterMarkSubtext" :showWater="bpmFlow.waterMark=='1' && this.$TOOL.data.get('WATER_MARK')!='1'">
				<div style="margin: 10px;text-align: -webkit-center;">
				<el-config-provider :locale="elLocale" >
					<VFormRender ref="preForm" :preview-state="true"></VFormRender>
				</el-config-provider>
			</div>
			<el-card shadow="never" header="公文附件" v-if="selected.includes('1') && bpmList.runAttach!=''">
				<el-form-item label="公共附件">
					<attach-menu :attach-ids="bpmList.runAttach" :roleFlag="bpmFlow.attachRole==1?'3':'2'" :preview="true" ></attach-menu>
				</el-form-item>
			</el-card>
				<el-card shadow="never" header="关联流程" v-if="selected.includes('5')&&isShowBpmLink">
					<bpmlink ref="bpmLink" :bpm-link-flag="1" :runId="runId" @success="setBpmLinkShow"></bpmlink>
				</el-card>
			<el-card shadow="never" header="会签意见" v-if="selected.includes('2')">
				<idearecord :bpm-step-run-list="bpmStepRunList" :hidden-opt="false"></idearecord>
			</el-card>
				<el-card shadow="never" header="审批过程" v-if="selected.includes('3')">
					<scTable :data="bpmStepRunList" stripe :hidePagination="true" :hideSetting="true" :hideRefresh="true">
						<el-table-column label="#" type="index"  width="50"></el-table-column>
						<el-table-column label="步骤名称" prop="stepName" width="150"></el-table-column>
						<el-table-column label="办理人员" prop="userName" width="170" align="center">
							<template #default="scope">
								<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
								<span style="position: absolute;margin-left: 10px">{{scope.row.userName}}</span>
							</template>
						</el-table-column>
						<el-table-column label="转交人" prop="createUserName" width="170" align="center">
							<template #default="scope">
								<el-avatar :src="scope.row.createAvatar" size="small"></el-avatar>
								<span style="position: absolute;margin-left: 10px">{{scope.row.createUserName}}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" prop="createTime" width="150" align="center"></el-table-column>
						<el-table-column label="接收时间" prop="recTime" width="150" align="center"></el-table-column>
						<el-table-column label="结束时间" prop="endTime" width="150" align="center"></el-table-column>
						<el-table-column label="客观意见" prop="passStatus" width="100" align="center">
							<template #default="scope">
								{{scope.row.passStatus=='1'?'同意':'不同意'}}
							</template>
						</el-table-column>
						<el-table-column label="审批意见" prop="ideaText" align="left">
							<template #default="scope">
								<div style="float: right;position: relative;">
									<el-icon v-if="scope.row.passStatus=='1'" style="color:#67C23A;font-size: 20px"><el-icon-circle-check-filled/></el-icon>
									<el-icon v-else-if="scope.row.passStatus=='0'" style="color:#F56C6C;font-size: 20px"><el-icon-circle-close-filled/></el-icon>
									<el-icon v-else style="color:#909399;font-size: 20px"><el-icon-clock/></el-icon>
								</div>
								<div style="width: 100%">
									<div>
										{{scope.row.ideaText}}
									</div>
									<attach-menu :attachIds="scope.row.stepAttach" :roleFlag="3" :preview="true" ></attach-menu>
								</div>
							</template>
						</el-table-column>
					</scTable>
				</el-card>
			</sc-water-mark>
		</el-main>
		<el-footer>
			<div style="display: inline-block;">
				<el-checkbox-group v-model="selected">
					<el-checkbox label="1">附件</el-checkbox>
					<el-checkbox label="2">意见</el-checkbox>
					<el-checkbox label="3">过程</el-checkbox>
					<el-checkbox label="5">关联</el-checkbox>
				</el-checkbox-group>
			</div>
			<div style="display: inline-block;float: right">
				<el-button type="warning" @click="printBpm" v-if="bpmFlow.printFlag=='1'">打印</el-button>
				<el-dropdown v-if="bpmFlow.expRole!=null&&bpmFlow.expRole!==''">
					<el-button type="primary">
						更多...<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="sendToEmail" v-if="(bpmFlow.expRole.split(',').includes('1'))">抄送邮件</el-dropdown-item>
							<el-dropdown-item @click="sendToNotice" v-if="(bpmFlow.expRole.split(',').includes('2'))">转发通知</el-dropdown-item>
							<el-dropdown-item @click="handleDownloadPdfTransverse" v-if="(bpmFlow.expRole.split(',').includes('3'))">另存为PDF(横)</el-dropdown-item>
							<el-dropdown-item @click="handleDownloadPdfDirection" v-if="(bpmFlow.expRole.split(',').includes('3'))">另存为PDF(纵)</el-dropdown-item>
							<el-dropdown-item @click="saveAsWord" v-if="(bpmFlow.expRole.split(',').includes('4'))">另存为Word</el-dropdown-item>
							<el-dropdown-item @click="saveAsHtml" v-if="(bpmFlow.expRole.split(',').includes('5'))">另存为Html</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</el-footer>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess"
				 @closed="dialog.save=false"></save-dialog>
	<send-email-dialog v-if="dialog.emailSave" ref="emailSaveDialog" @success="handleEmailSuccess" @closed="dialog.emailSave=false"></send-email-dialog>
</template>
<script>
import useTabs from '@/utils/useTabs'
import zhCNLang from 'element-plus/lib/locale/lang/zh-cn'
import enUSLang from 'element-plus/lib/locale/lang/en'
import VFormRender from "@/components/designer/form-render";
import idearecord from './idearecord'
import AttachMenu from '@/views/module/attachMenu'
import saveDialog from "@/views/info/notice/save";
import sendEmailDialog from "@/views/email/sendEmailDialog";
import bpmlink from "@/views/doc/handle/bpmlink.vue";
export default {
	name: 'Form Details',
	components: {
		bpmlink,
		sendEmailDialog,
		saveDialog,
		VFormRender,
		idearecord,
		AttachMenu,
	},
	data() {
		return {
			dialog: {
				save: false,
				emailSave:false
			},
			elLocaleMap: {
				'zh-cn': zhCNLang,
				'en': enUSLang,
			},
			runId: this.$route.query.runId,
			sendToId:this.$route.query.sendToId,
			selected:['1','2'],
			bpmStepRunList:[],
			waterMarkContent:'',
			waterMarkSubtext:'',
			bpmFlow:{},
			bpmList:{},
			formJson: {formConfig: {}, widgetList: {}},
			formData: {},
			isShowBpmLink:true
		}
	},
	computed: {
		elLocale() {
			let curLocale = localStorage.getItem('APP_LANG') || 'zh-cn'
			return this.elLocaleMap[curLocale]
		},
	},
	mounted() {
		this.getBpmFormJsonByFormId();
		if(this.sendToId!=undefined&&this.sendToId!=null&& this.sendToId!="")
		{
			this.$API.bpm.bpmSendTo.updateSendToStatus.post({sendToId:row.sendToId});
		}
	},
	methods: {
		async getBpmFormJsonByFormId() {
			var res = await this.$API.bpm.bpmForm.getBpmFormDetailsByRunId.get({runId: this.runId});
			if (res.code == 200) {
				this.bpmFlow = res.data.bpmFlow;
				this.bpmList = res.data.bpmList;
				this.formJson = res.data.formJson;
				this.waterMarkSubtext = res.data.waterMarkSubtext;
				this.waterMarkContent = res.data.waterMarkContent;
				this.$refs.preForm.setFormJson(this.formJson);
				this.bpmStepRunList = res.data.allBpmRunStep;
			}
		},
		closeTas() {
			useTabs.close()
		},
		printBpm()
		{
			this.$nextTick(() => {
				window.open('/#/doc/handle/print?runId=' + this.runId+"&ddtab=true", "_blank");
			})
		},
		saveAsWord() {
			this.$API.bpm.bpmFormData.getFromDataForWord.fileDownload({runId:this.runId});
		},
		saveAsHtml() {
			this.$API.bpm.bpmFormData.getFromDataForHtml.fileDownload({runId:this.runId});
		},
		//横向下载
		handleDownloadPdfTransverse() {
			this.$API.bpm.bpmFormData.getFromDataForPdf.fileDownload({runId:this.runId,direction:'1'});
		},
		//纵向下载
		handleDownloadPdfDirection() {
			this.$API.bpm.bpmFormData.getFromDataForPdf.fileDownload({runId:this.runId,direction:'0'});
		},
		async sendToNotice() {
			var res = await this.$API.bpm.bpmForm.getBpmFormDetailsForHtml.get({runId: this.runId});
			if (res.code == 200) {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open().revBpmData(
						{
							title: this.bpmList.flowTitle,
							attachId: this.bpmList.attachId,
							content: res.data.formHtml
						})
				})
			}
		},
		handleSaveSuccess() {
			this.$nextTick(() => {
				this.$router.replace({
					path: '/info/notice',
				})
			})
		},
		async sendToEmail(){
			var res = await this.$API.bpm.bpmForm.getBpmFormDetailsForHtml.get({runId: this.runId});
			if (res.code == 200) {
				this.dialog.emailSave = true
				this.$nextTick(() => {
					this.$refs.emailSaveDialog.open("send").revBpmData(
						{
							title: this.bpmList.flowTitle,
							attachId: this.bpmList.attachId,
							content: res.data.formHtml
						})
				})
			}
		},
		handleEmailSuccess() {
			this.$nextTick(() => {
				this.$router.replace({
					path: '/email',
					query: {
						groupId: "sendbox"
					}
				})
			})
		},
		setBpmLinkShow(flag)
		{
			this.isShowBpmLink = flag
		}
	}
}

</script>

<style lang="scss">
#app {
	height: 100%;
}
</style>
